<template>
  <div style="width: 100%; height: 100%">
    <div class="item-title">
      <span style="margin: auto 0">{{ title }}</span>
    </div>
    <div class="item-box" id="cityBarChart"></div>
  </div>
</template>

<script>

import * as echarts from 'echarts';
export default {
  name: "cityBarChart",
  data() {
    return {
      city: [
        {
          name: "南京市",
          value: 18500.81,
          percent: "4.5%",
        },
        {
          name: "无锡市",
          value: 16263.29,
          percent: "5.8%",
        },
        {
          name: "徐州市",
          value: 9537.12,
          percent: "6.4%",
        },
        {
          name: "常州市",
          value: 10813.59,
          percent: "6.1%",
        },
        {
          name: "苏州市",
          value: 26726.98,
          percent: "6%",
        },
        {
          name: "南通市",
          value: 12421.89,
          percent: "6.2%",
        },
        {
          name: "连云港市",
          value: 4663.13,
          percent: "5.8%",
        },
        {
          name: "淮安市",
          value: 5413.02,
          percent: "7.1%",
        },
        {
          name: "盐城市",
          value: 7779.18,
          percent: "5.5%",
        },
        {
          name: "扬州市",
          value: 7809.64,
          percent: "6%",
        },
        {
          name: "镇江市",
          value: 5540.01,
          percent: "5.9%",
        },
        {
          name: "泰州市",
          value: 7020.95,
          percent: "5.1%",
        },
        {
          name: "宿迁市",
          value: 4801.85,
          percent: "6.9%",
        },
      ],

    }
  },
  props: {
    title: {
      type:String,
      default: '市辖区数据'
    }
  },
  mounted() {
    this.initBarChart(this.city)
  },
  watch: {
    city: {
      handler(newData) {
        this.updateChart(newData);
      },
      deep: true
    }
  },
  beforeUnmount() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
  methods: {
    getInitialEnd(total) {
      return Math.min(100, Math.round((5 / total) * 100));
    },
    addColor(data) {
      return data.map((item, index) => {
        let color1 = null;
        let color2 = null;
        if (index == 0) {
          color1 = "rgba(21, 154, 255, 1)";
          color2 = "rgba(0, 58, 255, 0)";
        } else if (index == 1) {
          color1 = "rgba(255, 220, 167, 1)";
          color2 = "rgba(254, 201, 121, 0)";
        } else if (index == 2) {
          color1 = "rgba(102, 225, 223, 1)";
          color2 = "rgba(102, 225, 223, 0)";
        } else {
          color1 = "rgba(13, 182, 244, 1)";
          color2 = "rgba(13, 182, 244, 0)";
        }
        return {
          value: item.value,
          itemStyle: {
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: color1,
                },
                {
                  offset: 1,
                  color: color2,
                },
              ],
              global: false,
            },
          },
        };
      });
    },
    initBarChart(data) {

      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c0 = [shape.x, shape.y]
          const c1 = [shape.x - 9, shape.y - 9]
          const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
          const c3 = [xAxisPoint[0], xAxisPoint[1]]
          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
      })
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x, shape.y]
          const c2 = [xAxisPoint[0], xAxisPoint[1]]
          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
          const c4 = [shape.x + 18, shape.y - 9]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
          const c1 = [shape.x, shape.y]
          const c2 = [shape.x + 18, shape.y - 9]
          const c3 = [shape.x + 9, shape.y - 18]
          const c4 = [shape.x - 9, shape.y - 9]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)

      const max = Math.max(...data.map(item => item.value));
      const maxData = new Array(data.length).fill(max);

      const xdata = data.map(item => item.name);

      // 初始化图表
      this.myChart = echarts.init(document.getElementById('cityBarChart'));

      const options = {
        grid: {
          left: "3%",
          right: "3%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: xdata,
          splitLine: { show: false },
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            fontSize: 10,
            color: '#fff',
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisTick: { show: false },
          splitLine: {
            lineStyle: {
              color: "rgba(71, 153, 255, 0.60)",
              type: "dashed",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 14,
            margin: 8
          },
          axisLine: {
            lineStyle: {
              color: "rgba(71, 153, 255, 0.60)",
            },
          },
        },
        series: [
          {
            type: "custom",
            data: maxData,
            renderItem: function(params, api) {
              const location = api.coord([api.value(0), api.value(1)])
              return {
                type: 'group',
                children: [{
                  type: 'CubeLeft',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: 'rgba(7,29,97,.6)'
                  }
                }, {
                  type: 'CubeRight',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: 'rgba(10,35,108,.7)'
                  }
                }, {
                  type: 'CubeTop',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: 'rgba(11,42,106,.8)'
                  }
                }]
              }
            },
          },
          {
            type: "custom",
            data: data.map((item) => item.value),
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)])
              return {
                type: 'group',
                children: [{
                  type: 'CubeLeft',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#3B80E2'
                    },
                      {
                        offset: 1,
                        color: '#49BEE5'
                      }
                    ])
                  }
                }, {
                  type: 'CubeRight',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#3B80E2'
                    },
                      {
                        offset: 1,
                        color: '#49BEE5'
                      }
                    ])
                  }
                }, {
                  type: 'CubeTop',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#3B80E2'
                    },
                      {
                        offset: 1,
                        color: '#49BEE5'
                      }
                    ])
                  }
                }]
              }
            },
          }
        ],
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: this.getInitialEnd(data.length),
          filterMode: 'filter',
          zoomOnMouseWheel: false,
          moveOnMouseMove: true,
          moveOnMouseWheel: true
        }]
      };

      this.myChart.setOption(options);

      // 添加窗口大小调整事件监听
      window.addEventListener("resize", this.handleResize);
    },
    updateChart(data) {
      if (this.myChart) {
        const max = Math.max(...data.map(item => item.value));
        const maxData = new Array(data.length).fill(max);
        const xdata = data.map(item => item.name);

        this.myChart.setOption({
          xAxis: {
            data: xdata
          },
          series: [
            {
              type: "pictorialBar",
              data: maxData
            },
            {
              type: "pictorialBar",
              data: data.map((item) => item.value)
            },
            {
              type: "bar",
              data: this.addColor(data)
            }
          ],
          dataZoom: [{
            end: this.getInitialEnd(data.length)
          }]
        });
      }
    },

    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    }
  }
}
</script>

<style scoped lang="scss">

$easeTimer: 1;

@function ease-time($easeTimer) {
  @return unquote($easeTimer + 's');
}

@for $i from 1 through 10 {
  .ease#{$i} {
    animation: ease ease-time($easeTimer + $i);
  }
}

@keyframes ease {
  from {
    opacity: 0; // 初始透明度
  }
}

  .item-title {
    color: white;
    width: 100%;
    height: 13%;
    display: flex;
    flex-direction: column;
    align-content: center;
  }

  .item-box {
    width: 100%;
    height: 85%;
  }

.flex1 {
  flex: 1;
}
</style>